<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="">
        <el-input style="width: 140px" v-model="queryParams.railwayName" placeholder="线路名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button type="primary" @click="congzhiQuery">重置</el-button>
        <el-button @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="railwayList" height="62vh">
      <el-table-column label="序号" type="index" />
      <el-table-column label="线路编号" prop="railwayCode" />
      <el-table-column label="线路名称" prop="railwayName" />
      <el-table-column label="线路速度等级" prop="railwaySpeed" />
      <el-table-column label="拼音字头" prop="spellingPrefix" />
      <el-table-column label="线路简称" prop="railwayAbbreviation" />
      <el-table-column label="线路类型" prop="railwayType" />
      <el-table-column label="状态" prop="hasDelete">
        <template #default="scope">
          <el-switch
            v-model="scope.row.hasDelete"
            class="ml-2"
            inline-prompt
            active-text="启用"
            inactive-text="禁用"
            :active-value="0"
            :inactive-value="1"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            @change="changeUpdate(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" />
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改基础数据-线路数据对话框 -->
    <el-dialog :title="title" v-model="open" width="700px" append-to-body draggable>
      <el-form ref="form" :model="forma" :rules="rules" label-width="120px" :inline="true">
        <el-form-item label="线路编号" prop="railwayCode">
          <el-input style="width: 180px" v-model="forma.railwayCode" placeholder="请输入线路编号" />
        </el-form-item>
        <el-form-item label="线路名称" prop="railwayName">
          <el-input style="width: 180px" v-model="forma.railwayName" placeholder="请输入线路名称" />
        </el-form-item>
        <el-form-item label="线路速度等级" prop="railwaySpeed">
          <el-select filterable clearable style="width: 180px" v-model="forma.railwaySpeed" placeholder="请选择">
            <el-option v-for="dict in railwaySpeedobj" :label="dict.propertyName" :value="dict.propertyName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拼音字头">
          <el-input style="width: 180px" v-model="forma.spellingPrefix" placeholder="请输入拼音字头" />
        </el-form-item>
        <el-form-item label="线路简称">
          <el-input style="width: 180px" v-model="forma.railwayAbbreviation" placeholder="请输入线路简称" />
        </el-form-item>
        <el-form-item label="线路类型">
          <el-select filterable clearable style="width: 180px" v-model="forma.railwayType" placeholder="请选择">
            <el-option v-for="dict in railwayTypeobj" :label="dict.propertyName" :value="dict.propertyName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为支线" prop="isBranchLine">
          <el-select filterable clearable style="width: 180px" v-model="forma.isBranchLine" placeholder="请选择">
            <el-option v-for="dict in isBranchLineobj" :label="dict.value" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input style="width: 180px" v-model="forma.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="line">
import { insertManBasicRailwayapi, selectManBasicRailwayListapi, editManBasicRailwayapi, selectManBasicPropertyListapi } from "@/api/main/api.js";
import { reactive, ref, toRefs } from "vue";
defineExpose({ getList });
const emit = defineEmits(["parentCount"]);
const { proxy } = getCurrentInstance();
const loading = ref(true);
const title = ref("线路信息新增");
const open = ref(false);
const data = reactive({
  // 基础数据-单位数据表格数据
  railwayList: [],
  // 查询参数
  queryParams: {
    pageNum: "1",
    pageSize: "10",
    railwayName: null,
  },
  //是否为支线
  isBranchLineobj: [
    { value: "是", label: "是" },
    { value: "否", label: "否" },
  ],
  railwayTypeobj: [
    // { value: "普通", label: "普通" },
    // { value: "无缝", label: "无缝" },
  ],
  railwaySpeedobj: [
    // { value: "80", label: "80" },
    // { value: "120", label: "120" },
    // { value: "160", label: "160" },
  ],
  // 表单参数
  forma: {},
  // 表单校验
  rules: {
    railwayCode: [{ required: true, message: "线路编号不能为空", trigger: ["blur", "change"] }],
    railwayName: [{ required: true, message: "线路名称不能为空", trigger: ["blur", "change"] }],
    railwaySpeed: [{ required: true, message: "线路速度等级不能为空", trigger: ["blur", "change"] }],
    isBranchLine: [{ required: true, message: "是否为支线不能为空", trigger: ["blur", "change"] }],
    sort: [{ required: true, message: "排序不能为空", trigger: ["blur", "change"] }],
  },
  editobj: {},
  propertyList: [],
});
const { propertyList, queryParams, forma, rules, railwayList, isBranchLineobj, railwayTypeobj, railwaySpeedobj, editobj } = toRefs(data);

/** 查询基础数据-单位数据列表 */
const pageNumparent = ref(undefined);
const pageSizeparent = ref(undefined);
/** 查询列表 */
function getList(pageNum, pageSize) {
  loading.value = true;
  if (pageNum != undefined || pageSize != undefined) {
    pageNumparent.value = pageNum;
    pageSizeparent.value = pageSize;
    queryParams.value.pageNum = pageNum == undefined ? 1 : pageNum;
    queryParams.value.pageSize = pageSize == undefined ? 10 : pageSize;
  } else {
    queryParams.value.pageNum = pageNumparent.value == undefined ? "1" : pageNumparent.value;
    queryParams.value.pageSize = pageSizeparent.value == undefined ? "10" : pageSizeparent.value;
  }
  selectManBasicRailwayListapi(queryParams.value).then((res) => {
    if (res.code == 200) {
      railwayList.value = res.data;
      loading.value = false;
      emit("parentCount", res.count);
    }
  });
}
getList();
/** 查询基础数据-属性维护数据列表 */
function getList3() {
  selectManBasicPropertyListapi({ hasDelete: 0 }).then((res) => {
    if (res.code == 200) {
      propertyList.value = res.data;
      railwayTypeobj.value = [];
      railwaySpeedobj.value = [];
      for (let i = 0; i < propertyList.value.length; i++) {
        if (propertyList.value[i].propertyType == "线路类型") {
          railwayTypeobj.value.push(propertyList.value[i]);
        }
        if (propertyList.value[i].propertyType == "线路速度等级") {
          railwaySpeedobj.value.push(propertyList.value[i]);
        }
      }
    }
  });
}
getList3();
// 取消按钮
function cancel() {
  open.value = false;
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
function congzhiQuery() {
  // 查询参数
  queryParams.value = {
    railwayName: null,
  };
  getList();
}
/** 新增按钮操作 */
function handleAdd() {
  open.value = true;
  forma.value = {
    railwayCode: "",
    railwayName: "",
    railwaySpeed: "",
    spellingPrefix: "",
    unitTrailwayAbbreviationype: "",
    railwayType: "",
    isBranchLine: "",
    railwayTypeId: "",
    railwaySpeedId: "",
    sort: "",
  };
  title.value = "线路信息新增";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  title.value = "线路信息修改";
  editobj.value = JSON.parse(JSON.stringify(row));
  forma.value = JSON.parse(JSON.stringify(row));
  open.value = true;
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["form"].validate((valid) => {
    if (valid) {
      for (let i = 0; i < propertyList.value.length; i++) {
        if (forma.value.railwayType == propertyList.value[i].propertyName) {
          forma.value.railwayTypeId = propertyList.value[i].id;
        }
        if (forma.value.railwaySpeed == propertyList.value[i].propertyName) {
          forma.value.railwaySpeedId = propertyList.value[i].id;
        }
      }
      if (forma.value.id != null) {
        const newforma = JSON.parse(JSON.stringify(forma.value));
        for (const key in editobj.value) {
          for (const keya in newforma) {
            if (key == keya && editobj.value[key] == newforma[keya] && key != "id") {
              Reflect.deleteProperty(newforma, keya);
              Reflect.deleteProperty(newforma, "params");
            }
          }
        }
        if (Object.keys(newforma).length <= 1) {
          open.value = false;
        } else {
          editManBasicRailwayapi(newforma).then((res) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        }
      } else {
        console.log(forma.value);
        insertManBasicRailwayapi(forma.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
function changeUpdate(row) {
  forma.value = JSON.parse(JSON.stringify(row));
  editManBasicRailwayapi({ hasDelete: forma.value.hasDelete, id: row.id }).then((res) => {
    proxy.$modal.msgSuccess("修改成功");
    open.value = false;
    getList();
  });
}
</script>
